<script setup>
import { reactive, ref, computed } from "vue"
import { User, Lock, Message, Promotion } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import { get, post } from "@/request"
const form = reactive({
    username: "",
    password: "",
    rePassword: "",
    email: "",
    code: ""
});
const router = useRouter();
const goLogin = () => {
    router.push("/");
}

const checkUserName = (rule, value, callback) => {
    if(value === ""){
        callback(new Error("用户名不能为空"))
    }else if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)){
        callback(new Error("用户名输入错误"))
    }else{
        callback();
    }
}

const checkPassword = (rule, value, callback) => {
    if(!value){
        callback(new Error("请输入密码"))
        return;
    }
    if(value!==form.password){
        callback(new Error("两次输入的密码不一样"))
        return;
    }
    callback();
}

const rule = {
    username: [
        {validator: checkUserName, trigger:["blur", "change"]},
        {min: 3, max: 20, message:"用户名必须为3-20位的字符串"}
    ],
    email: [
        {required: true, message: "email不能为空", trigger:"blur"},
        {type: "email", message: "email不合法", trigger:["blur", "change"]}
    ],
    password: [
        {required: true, message: "密码不能为空", trigger:["blur", "change"]},
        {min: 6, max: 16, message: "密码必须为6-16位的字符串", trigger:["blur", "change"]}
    ],
    rePassword: [
        {validator: checkPassword, trigger: ["blur", "change"]}
    ],
    code: [
        {required: true, message: "验证码不能为空", trigger:["blur"]}
    ]
};

const limitTimes = ref(0)
const isDisabled = computed(()=>limitTimes.value!=0);
const checkEmail = computed(()=>/^[\w.-]+@[\w.-]+\.\w+$/.test(form.email));

const getCode = () => {
    if(!form.email){
        ElMessage.error("邮箱不能为空");
        return;
    }
    if(!checkEmail)return;
    limitTimes.value = 60
    
    get(`/api/auth/get-email-code?email=${form.email}&action=register`,
    ()=>{
        ElMessage.success("验证码已经发送成功")
        window.timmer = setInterval(()=>{
            limitTimes.value --;
            if(limitTimes.value<=0){
                limitTimes.value = 0
                clearInterval(window.timmer)
            }
        }, 1000);
    },
    (message)=>{
        limitTimes.value = 0;
        window.timmer && (clearInterval(window.timmer))
    });
}

const formRef = ref()
const register = () => {
    formRef.value.validate((valid) => {
        if(valid){
            post("/api/auth/register",
                {...form},
                ()=>{
                   ElMessage.success("注册成功")
                   router.push("/") 
                }
            );
        }else{
            ElMessage.error("信息填写不完整")
        }
    });
}
</script>

<template>
  <div class="left-box">
    <el-image style="border-radius: 6px 0 0 6px;display: block;" src="https://cdn.maxuetang.cn/ojimages/uploadFiles/image/20250505/20250505233533_751_htimg.png"/>
  </div>
  <div class="right-box">
    <div class="login-form">
        <div>
            <h1>注册</h1>
            <div>
                <el-form :model="form" :rules="rule" ref="formRef">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" type="text" 
                            maxlength="20" placeholder="请输入用户名">
                            <template #prefix>
                                <el-icon><User/></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="email">
                        <el-input v-model="form.email" maxlength="50"
                        placeholder="请输入email" type="email"
                        >
                            <template #prefix>
                                <el-icon><Message/></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="password">
                        <el-input v-model="form.password" maxlength="16"
                        placeholder="请输入密码" type="password"
                        >
                            <template #prefix>
                                <el-icon><Lock/></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.rePassword" maxlength="16"
                        placeholder="请再输入密码确认" type="password"
                        >
                            <template #prefix>
                                <el-icon><Lock/></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-row>
                        <el-col :span="18">
                            <el-form-item prop="code">
                                <el-input v-model="form.code" maxlength="6"
                                    placeholder="请输入验证码" type="text"
                                    >
                                        <template #prefix>
                                            <el-icon><Promotion /></el-icon>
                                        </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" class="text-right">
                            <el-button @click="getCode" :disabled="isDisabled || !checkEmail" type="success" class="mxt-btn" plain>
                                {{limitTimes>0?`${limitTimes}秒后重获`: '获取验证码'}}
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
                
            </div>
            <el-row>
                <el-col :span="12">
                    <el-button @click="register" type="success" class="mxt-btn">注册</el-button>
                </el-col>
                <el-col :span="12" class="text-right">
                    <el-button @click="goLogin()" type="default" class="mxt-btn" plain>去登录</el-button>
                </el-col>
            </el-row>
        </div>
        
    </div>
  </div>
  
</template>
<style scoped>
.left-box, .right-box{
    width: 50%;
    height: 100%;
    color: #969696;
}

.right-box{
    position: absolute;
    top:0;
    left: 50%;
}
.login-form{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    flex-direction: column;
    border-radius: 6px 0 0 6px;
}
.login-form>div{
    width: 90%;
}
.text-right{
    text-align: right;
}
.mxt-btn{
    min-width: 90%;
}
.split-box{
    width: 90%;
    margin-top: 30px;
}
.split-item{
    width: 100%;
}
</style>